<template>
  <div class="footer">
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h2>Welcome to our website</h2>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h3>作品展示</h3>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <h3 style="margin-left: 2em">联系方式</h3>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="6"
        ><div class="grid-content2 bg-purple">
          <p class="brief">
            Aliquid dolorum saepe magnam natus perferendis corrupti tenetur
            quidem suscipit eaque blanditiis corporis veniam molestias qui culpa
            veritatis officiis eum. Doloribus quos minus quas reprehenderit!
          </p>
        </div></el-col
      >
      <el-col :span="6" class="pics"
        ><div @click="goToWorks" class="grid-content2 bg-purple grid-photo">
          <ul>
            <li v-for="imgUrl in photoList.slice(0, 3)" :key="imgUrl">
              <img :src="imgUrl" alt="" />
            </li>
          </ul>
          <ul>
            <li v-for="imgUrl in photoList.slice(3, 6)" :key="imgUrl">
              <img :src="imgUrl" alt="" />
            </li>
          </ul></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content2 bg-purple">
          <ul style="margin-left: 2em">
            <li style="margin-bottom: 1em"><span>电话：</span>18542554654</li>
            <li><span>邮箱：</span>Crafts@aliyun.com</li>
          </ul>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HomeBottom",
  data() {
    return {
      photoList: [],
    };
  },
  methods: {
    getPhoto() {
      this.$axios({
        url: "https://api.unsplash.com/photos/random",
        method: "get",
        params: {
          query: "craft",
          count: 6,
          client_id: "5jBjQ9cyPwC-jYxqXG29Rr80hffPzxFWscbG1PndkRs",
        },
      })
        .then((res) => {
          //   console.log(res.data);
          res.data.forEach((photoObj) => {
            this.photoList.push(photoObj.urls.small);
          });
          //   console.log(this.photoList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goToWorks() {
      this.$emit("goWorks");
    },
  },
  mounted() {
    this.getPhoto();
  },
};
</script>

<style lang="less" scoped>
.footer {
  background-color: #242424;
  height: 17rem;
  width: 100%;
  overflow: hidden;
}

.grid-content {
  margin-top: 70px;
  border-radius: 4px;
  width: 100%;
  color: #fff;
  min-height: 2rem;
}
.grid-content2 {
  margin-top: 13px;
  border-radius: 4px;
  width: 90%;
  color: #fff;
  min-height: 2rem;
  ul {
    list-style: none;
    span {
      color: #fad672;
    }
  }
}
.grid-photo {
  ul {
    display: flex;
    li {
      margin: 0 5px 5px;
      img {
        width: 100px;
        height: 60px;
      }
    }
  }
}
.pics:hover {
  cursor: pointer;
}
.brief {
  font-size: 14px;
  text-align: end;
  text-indent: 2em;
  line-height: 1.7em;
}
</style>
